<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引包 -->
    <script src="./echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 50vw;
            height: 50vh;
            display: block;
            border: 1px solid black;
            margin: 10px auto;
        }
    </style>
</head>

<body>
    <!-- 移动高度的容器 -->
    <div class="box"></div>
</body>

</html>
<script>
    //获取echarts类的实例
    let mycharts = echarts.init(document.querySelector('.box'));
    //准备配置对象
    let options = {
        //标题组件
        title: {
            text: '其他组件'
        },
        xAxis: {
            data: ['军事', '财经', '直播', '娱乐'],
            //指示器
            axisPointer: {
                show: true,
                type: 'shadow'
            }
        },
        yAxis: {},
        series: [
            {
                name: '柱状图',
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60]
            },
            {
                name: '柱状图1',
                type: 'bar',
                data: [10, 20, 30, 40, 50, 60]
            },
            {
                name: '折线图',
                type: 'line',
                data: [10, 20, 30, 40, 50, 60]
            }

        ],
        //布局组件:调整图形图标距离容器距离
        grid: {
            bottom: 100,
            show: true,
            //布局组件的背景颜色
            backgroundColor: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'cyan' // 0% 处的颜色
                }, {
                    offset: 1, color: 'yellow' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
        //图例组件
        legend: {
            //图例组件位置调整
            right: 0,
            //方向
            orient: 'vertical',
            //每一个小图例间隙
            itemGap: 15,
            //折线的样式
            lineStyle: {
                color: 'red'
            },
            textStyle: {
                color: 'pink'
            },
            icon: 'diamond'
        },
        //提示框组件
        tooltip: {
            //是否将 tooltip 框限制在图表的区域内。
            confine: true,
            //提示框位置
            position: function (point, params, dom, rect, size) {
                // 固定在顶部
                return [point[0], '30%'];
            }
        },
        //工具栏组件
        toolbox: {
            show: true,
            //位置
            left:100,
            //各种工具
            feature: {
                //保存图片工具
                saveAsImage: {
                    name:'豪哥',//保存图片名字
                    type:'jpg',
                    backgroundColor:'black',
                    title:'保存图片'
                },
                //视觉视图工具
                dataView:{},
                dataZoom:{},
                restore:{}
            }
        },
        dataZoom:{}

    };
    //调用setOption方法,进行设置
    mycharts.setOption(options);
</script>